<template>
  <el-dialog
    :model-value="show"
    title="申请详情"
    width="800px"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    class="dynamics-dialog"
  >
    <el-tabs type="border-card" class="dynamics-tabs">
      <el-tab-pane label="申请内容">
        <DynamicsForm
          ref="DynamicsFormRef_1"
          form_role="platform"
          :api="platformApplicationDetail"
          :params="formParams"
        />
      </el-tab-pane>
      <!-- 处理中和已完成tab显示 -->
      <el-tab-pane v-if="activeTab == 3 || activeTab == 4" label="处理结果">
        <DynamicsForm
          ref="DynamicsFormRef_2"
          form_role="platform"
          :api="platformApplicationFb_accountDetail"
          :params="formParams_2"
        />
      </el-tab-pane>
      <el-tab-pane label="申请记录">
        <ApplyHistory :activeRow="activeRow" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <!-- 待处理 -->
      <el-button
        v-if="activeTab === 1"
        type="primary"
        :loading="receiveLoading"
        :disabled="!show"
        @click="receiveApply"
      >
        接收申请
      </el-button>
      <!-- 待处理 -->
      <el-button v-if="activeTab === 1" type="primary" @click="rejectApply">
        驳回申请
      </el-button>
      <!-- 处理中 -->
      <el-button
        v-if="activeTab === 3"
        type="primary"
        :loading="submitLoading"
        :disabled="!show"
        @click="submitApply"
      >
        完成申请
      </el-button>
      <el-button type="info" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
  <RejectDialog
    v-model:show="showRejectDialog"
    :activeRow="activeRow"
    @submit="sureReject"
  />
</template>

<script setup>
import DynamicsForm from '@/components/DynamicsForm';
import ApplyHistory from '@/components/ApplyHistory';
import RejectDialog from './RejectDialog';
import {
  platformApplicationDetail,
  platformApplicationAccept,
  platformApplicationFb_accountDetail
} from '@/api/resources';
import { applicationFbAccountComplete } from '@/api/resources-manage';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeTab: {
    type: Number,
    default: 0
  },
  activeRow: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits(['success', 'update:show']);

const formParams = computed(() => {
  return { id: props.activeRow.id, view_type: 1 }; // 1 纯展示详情
});
const formParams_2 = computed(() => {
  return { id: props.activeRow.id, view_type: props.activeTab == 3 ? 2 : 1 }; // 1 纯展示详情
});
const DynamicsFormRef_1 = ref();
const DynamicsFormRef_2 = ref();

// 关闭
function handleClose() {
  emit('update:show', false);
}

// 接收申请
const receiveLoading = ref(false);
function receiveApply() {
  receiveLoading.value = true;
  platformApplicationAccept({ id: props.activeRow.id })
    .then(() => {
      $msg.success('接收申请成功，请及时处理申请');
      emit('success');
      handleClose();
    })
    .finally(() => {
      receiveLoading.value = false;
    });
}

// 驳回
const showRejectDialog = ref(false);
function rejectApply() {
  showRejectDialog.value = true;
}
function sureReject() {
  $msg.success('驳回申请成功');
  emit('success');
  handleClose();
}

// 完成申请
const submitLoading = ref(false);
async function submitApply() {
  try {
    submitLoading.value = true;
    const values = await DynamicsFormRef_2.value.returnData();
    applicationFbAccountComplete({ values })
      .then(() => {
        $msg.success('完成申请');
        emit('success');
        handleClose();
      })
      .finally(() => {
        submitLoading.value = false;
      });
  } catch {
    submitLoading.value = false;
  }
}

// 初始化表单
watch(
  () => props.show,
  async val => {
    if (!val) return;
    await nextTick();
    DynamicsFormRef_1.value?.initFormList();
    DynamicsFormRef_2.value?.initFormList();
  }
);
</script>

<style lang="scss" scoped></style>
